<template>

    <el-dialog title="账户操作" :visible.sync="visible" :close-on-click-modal="false">

      <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="80px" label-position="left" :inline="false" style="width: 400px;">

        <el-form-item v-if="!!data" label="商户号" size="mini" prop="">
          <span v-text="data.mchNo"></span>
        </el-form-item>
<!-- 
        <el-form-item v-if="!!data" label="终端号" size="mini" prop="">
          <span v-text="data.terNo"></span>
        </el-form-item> -->

        <el-form-item label="账户类型" prop="accountType">
          <el-radio-group v-model="mainQuery.accountType">
            <el-radio v-for="item in accountTypeOptions" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item label="事件类型" prop="type">
          <el-radio-group v-model="mainQuery.type">
            <el-radio v-for="item in eventTypeOptions" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item> -->

        <el-form-item label="金额" size="mini" prop="amount">
          <el-input placeholder="" v-model.number="mainQuery.amount" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>

        <el-form-item label="备注" size="mini" prop="createRemark">
          <el-input placeholder="" v-model="mainQuery.createRemark" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <!-- <el-popover
          v-if="id != null"
          placement="top"
          width="160"
          v-model="popDeleteVisible">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
            <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
          </div>
          <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
        </el-popover> -->

        <el-button @click="close" size="mini">取 消</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
      </div>
    </el-dialog>

</template>

<script>

import ApiMain from '@/api/settle.operatetrade';

export default {
  mixins: [
  ],
  props: [
    'accountTypeOptions',
    'eventTypeOptions',
    'statusOptions',
  ],
  data () {
    return {

      visible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQueryRaw: null,
      mainQuery: {
        accountType : '',
        type        : '',
        amount     : '',
        createRemark: '',
      },

      rules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { type: 'number', message: '请输入数值', trigger: 'blur' },
        ],
        accountType: [
          { required: true, message: '请选择账户类型', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择事件类型', trigger: 'blur' },
        ],
        createRemark: [
          { required: true, message: '请填写备注', trigger: 'blur' },
        ],
      },

      id  : null,
      data: null,
    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (data) {

      this.reset();
    console.log(data)
      this.data = data;
      this.id = data.id;

      this.visible = true;
    },

    close () {
      this.visible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id   = null;
      this.data = null;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;
      this.loading = true;


      try {

        var req = Object.copy(this.mainQuery);

        req.mchId = this.data.mchId;
        req.mchNo = this.data.mchNo;
        req.terId = this.data.terId;
        req.terNo = this.data.terNo;

        req.amount = req.amount * 100;

        await ApiMain.add(req);
        this.$message({message: '操作成功', type: 'success'});
        this.close();
      } catch (err) { console.error(err); }

      this.loading = false;

    },

  }
}
</script>

<style>

</style>
